<template>
  <div>
    <div class="alert">
      <el-alert type="info" :title="`一共有${counts}条记录`" show-icon />
    </div>

    <el-table :data="subjectList" stripe style="width: 100%">
      <el-table-column prop="date" label="序号" type="index" width="80" />
      <el-table-column prop="subjectName" label="学科名称" width="100" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column prop="addDate" label="创建日期" />
      <el-table-column prop="isFrontDisplay" label="前台是否显示" />
      <el-table-column prop="twoLevelDirectory" label="二级目录" />
      <el-table-column prop="tags" label="标签" />
      <el-table-column prop="totals" label="题目数量" />
      <el-table-column label="操作" width="220">
        <template v-slot="{row}">
          <el-button type="text" size="mini" @click="$router.push('/subjectManagement/directory')">学科分类</el-button>
          <el-button type="text" size="mini" @click="$router.push('/subjectManagement/label')">学科标签</el-button>
          <el-button type="text" size="mini" @click="onUpdateClick(row)">修改</el-button>
          <el-button type="text" size="mini" @click="onDeleteClick(row)">删除</el-button>
          <Dialog :id="row.id" :update-list="updateList" :add-visible.sync="updateVisible" @updateSubject="updateSubject" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { DeleteSubjectAPI } from '@/api'
import Dialog from './dialog'
export default {
  name: 'TableLayout',
  components: {
    Dialog
  },
  props: {
    subjectList: Array,
    counts: Number
  },
  data() {
    return {
      activeNames: '',
      ruleForm: {},
      rules: {},
      stateList: [
        {
          value: '选项1',
          label: '启用'
        }, {
          value: '选项2',
          label: '关闭'
        }
      ],
      updateVisible: false,
      updateList: {}

    }
  },
  methods: {
    /**
     * 修改
     */
    onUpdateClick(row) {
      this.updateList = row
      this.updateVisible = true
    },
    /**
     * 删除
     */
    async onDeleteClick(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await DeleteSubjectAPI(row.id, row)
        this.$emit('success')
        // console.log(res);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
			// 修改功能的自动刷新事件（子传父，再传父），这是中间的一步
			updateSubject() {
			this.$emit('updateSubject')
			}

  }
}
</script>
<style lang='scss' scoped>
.catalogue {
  width: 35%;
}
::v-deep.item-catalogue {
  display: flex;
  justify-content: space-between;
}
.alert {
  margin: 20px;
}
.el-button--default {
  margin-left: 20px;
}
</style>

